<template>
  <video ref="videoPlayer" id="my-player" class="video-js" controls preload="auto" ></video>
</template>

<script>
  import videojs from 'video.js'
  export default {
    name:'MyVideo',
    props:['titleBar','nextBtn','options'],
    data(){
      return {
        player: null
      }
    },
    mounted(){
      const that = this;
      this.player = videojs(this.$refs.videoPlayer, this.options, ()=>{
        let Component = videojs.getComponent('Component');
        if(this.titleBar){
          let TitleBar = videojs.extend(Component, {
            constructor: function(player, options) {
              Component.apply(this, arguments);
              if (options.text) {
                this.updateTextContent(options.text);
              }
            },
            createEl: function() {
              return videojs.createEl('div', {
                className: 'vjs-title-bar'
              });
            },
            updateTextContent: function(text) {
              if (typeof text !== 'string') {
                text = 'Title Unknown';
              }
              videojs.emptyEl(this.el());
              videojs.appendContent(this.el(), text);
            }
          });
          videojs.registerComponent('TitleBar', TitleBar);
        }
        if(this.nextBtn){
          let NextBtn = videojs.extend(Component,{
            createEl(){
              return videojs.createEl('button',{
                className: 'iconfont icon-bofangqi-xiayiji my vjs-control  vjs-button',
                onclick: ()=>{
                  that.$emit('next');
                }
              });
            }
          });
          videojs.registerComponent('NextBtn', NextBtn);
        }
        let player = videojs('my-player');
        if(this.titleBar){
          player.addChild('TitleBar', {text: this.titleBar});
        }
        if(this.nextBtn){
          player.controlBar.addChild('NextBtn',{},1);
        }
      });
    },
    beforeDestroy(){
      if(this.player){
        this.player.dispose();
      }
    }
  }
</script>

<style>
  .video-js .vjs-title-bar {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;

    /*
      By default, do not show the title bar.
    */
    display: none;
    font-size: 2em;
    padding: .2em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /*
    Only show the title bar after playback has begun (so as not to hide
    the big play button) and only when paused or when the user is
    interacting with the player.
  */
  .video-js.vjs-paused.vjs-has-started .vjs-title-bar,
  .video-js.vjs-user-active.vjs-has-started .vjs-title-bar{
    display: block;
  }

  .my:before{
    display: block;
    width: 40px;
    text-align: center;
    cursor: pointer;
    font-size: 1.8em;
    line-height: 1.67;
  }

  .video-js .vjs-big-play-button{
    top:50% !important;
    left:50% !important;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
